<template>
    <view class="timeExchange">
        <view class="bgImg">
            <image src="../../../static/my/timeExchange_bg.png" mode=""></image>
        </view>
        <view class="exchange_main">
            <view class="bx_b">
                <image class="bg" src="../../../static/my/if_card.png" mode=""></image>
                <view class="con_Box">
                    <view class="con_tit">限时兑换神椰CoCo</view>
                    <view class="con_text">
                        <view class="list">
                            <text class="lable">可用通分：</text>
                            <text class="val max">{{cocoData.tfAmount}}</text>
                        </view>
                        <view class="list">
                            <text class="lable">当前兑换比例：</text>
                            <text class="val">{{cocoData.exchangeRatio}}通分 ：1CoCo</text>
                        </view>
                        <view class="listTime">
                            <view class="top">兑换时间：</view>
                            <view class="val">{{cocoData.exchangeTimeStart}} 至 {{cocoData.exchangeTimeEnd}}</view>
                        </view>
                        <view class="tk_b">
                            <view class="lf_t">
                                <text>剩余可兑换数量：</text>
                                <text class="min">{{cocoData.exchangeSurplusNum}}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="cardBox">
                <view :class="[curreentId == item.exchangeAmount ? 'active' : '','min_card']" v-for="(item,index) in cocoData.exchangeList" @click="handleCard(item)">
                    <view class="tou" v-if="!item.isChange"></view>
                    <view class="num_b">
                        <text>{{item.exchangeAmount}}</text>
                        <text>CoCo</text>
                    </view>
                    <view class="text">消耗{{item.useTfAmount}}通分</view>
                </view>
            </view>
            <view class="sumBox">
                <view class="form_box">
                    <view class="inp_box">
                        <text>自定义</text>
                        <input type="number"  v-model="num" placeholder="请输入数量" @input="changeNum" :cursor-spacing="10" ref="input" :always-embed="true" />
                        <text>CoCo</text>
                    </view>
                    <view class="tips">消耗{{botconsumption}}通分</view>
                </view>
            </view>
            <view class="btnBox">
                <view class="btn" @click="handleOpen">立即兑换</view>
            </view>
        </view>
       
        <payDialog ref="popupBox"  v-if="popupBoxStatus" @determine="determine" @close='close' :consumption="consumption" :payPoundage="payPoundage" ></payDialog>
    </view>
</template>

<script>
    import payDialog from './components/DetailDialog.vue'
    import DetailDialog from '@/pages/my/equity-card/components/DetailDialog2.vue'
    import { rsaEncrypt } from '@/common/RSA.js'
    export default {
        data() {
            return {
                
                curreentId: '',
                id: '',
                cocoData: {},
                num: null,
                consumption: 0,
                topconsumption: 0,
                botconsumption: 0,
                exchangeAmount: '',
                poundage: '',
                popupBoxStatus: false,
                payData: {},
                payNumber: '',
                payPoundage: '',//手续费
                
            }
        },
        components: {
        	DetailDialog,
            payDialog
        },
        onLoad(e){
            this.id = e.id
            this.getCocodetail()
        },
		onHide() {
			
			 const el = document.documentElement || document.body
			 const originHeight = el.clientHeight;
			 $(window).resize(function(){            
			      const resizeHeight = el.clientHeight
			      if (resizeHeight < originHeight) {
			          //alert('键盘弹起')
			      } else {
			          //alert('键盘收起') 
			         // $("#input").blur(); //触发blur事件
			     }
			}) 

		},
        methods: {
            changeNum(){
                console.log('e',this.num)
                this.curreentId = ''
                if(this.num != ''){
                    
                    var num = parseFloat(this.num)
                    var poundage =  parseFloat(this.poundage)
                    var consumption = parseFloat(this.consumption)
                    var exchangeRatio = parseFloat(this.cocoData.exchangeRatio)
                    var exchangeServiceRatio = parseFloat(this.cocoData.exchangeServiceRatio)
                    poundage = this.cocoData.exchangeServiceRatio/100 * num * exchangeRatio
                    poundage = Math.round(poundage * 100)/100
                    poundage = Math.ceil(poundage)
                    this.poundage = poundage
                    consumption = num * exchangeRatio
                    consumption =  Math.round(consumption * 100)/100
                    this.consumption = consumption
                    this.botconsumption = consumption
                    this.payNumber = num
                    this.payPoundage =  Math.round(num * exchangeRatio * exchangeServiceRatio/100 * 100)/100
                }else{
                    this.consumption = 0
                }
            },
            //选择兑换类型
            handleCard(item){
                if(item.isChange){
                    this.curreentId = item.exchangeAmount
                    this.payNumber = item.exchangeAmount
                    this.consumption = item.useTfAmount
                    this.payPoundage = item.exchangeServiceAmount
                    this.num = '' //输入表单置空
                    this.botconsumption = 0
                }
                
            },
            handleOpen(){
                var regNum = /^[0-9]*[1-9][0-9]*$/ 
                // console.log(regNum.test(this.num),'正整数')
                if(!regNum.test(this.payNumber)){
                    uni.showToast({
                        title: '请输入正整数',
                        icon: 'none'
                    })
                    return 
                }
                if(this.curreentId || this.payNumber ){
                     this.popupBoxStatus = true
                }
            },
            //查询兑换coco详情
            async getCocodetail(){
                var id = this.id 
                var res = await this.$api.getCocodetail(id)
                this.cocoData = res.result
                this.cocoData.exchangeTimeStart = res.result.exchangeTimeStart + ":00"
                this.cocoData.exchangeTimeEnd = res.result.exchangeTimeEnd + ":00"
            },
            //数字键盘打开
            openPupop(){
              this.popupBoxStatus = true
            },
            //数字键盘关闭
            close(){ 
              this.popupBoxStatus = false
            },
            // 确认支付
            async determine(e){
                console.log('密码',e)
                var data = {
                    exchangeAmount: this.payNumber,
                    id: this.cocoData.id,
                    password: e.password,
                }
                let jiami = rsaEncrypt(JSON.stringify(data)) //rsa加密
                let params = {
                	encryptData: jiami
                }
                uni.showLoading({
                	title:'加载中。。。',
                	mask:true
                })
                try{
                	var res =await this.$api.integralCommodity(params)
                	uni.hideLoading()
                	this.close()
                	this.$queue.showToast('兑换成功！');
                	uni.navigateTo({
                		url: '/pages/my/timeExchange/successPage/successPage?orderNo='+res.result.orderNo + '&tradeTime='+res.result.tradeTime + '&amount='+res.result.amount
                	})
                }catch{
                	this.$refs.popupBox.password = ''
                	uni.hideLoading()
                }
                
                
            },
            
        }
    }
</script>

<style scoped>
.timeExchange{
    position: relative;
}
.bgImg{
    width: 100%;
    height: 280rpx;
    position: absolute;
}
.bgImg image{
    width: 100%;
    height: 100%;
}
.exchange_main {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.exchange_main .bx_b{
    position: relative;
    width: 690rpx;
    height: 444rpx;
    margin-top: 22rpx;
}
.exchange_main .bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100;
}
.con_Box{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.con_tit{
    width: 100%;
    height: 74rpx;
    line-height: 74rpx;
    font-size: 32rpx;
    color: #fff;
    text-align: center;
}
.con_text{
    padding: 40rpx;
}
.con_text .list{
  display: flex; 
    justify-content: flex-start;
    align-items: center;
    margin-top: 14rpx;
}
.con_text .list .lable{
    font-size: 30rpx;
    color: #222;
}
.con_text .list .val{
    font-size: 30rpx;
    color: #222;
}
.con_text .list .max{
    font-size: 40rpx;
    color: #AF5D2E;
    font-weight: 500;
}
.listTime{
   margin-top: 14rpx; 
   font-size: 28rpx;
   color: #222;
}
.listTime .top{
    
}
.listTime .val{
    
}
.tk_b{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 26rpx;
   
}
.tk_b .lf_t {
    display: flex;
    align-items: center;
    color: #222;
}
.tk_b .lf_t text:nth-child(1){
    font-size: 30rpx;
    color: #222;
}
.tk_b .lf_t .min{
    font-size: 28rpx;
}
.tk_b .rg_b{
    width: 176rpx;
    text-align: center;
    height: 64rpx;
    line-height: 64rpx;
    color: #fff;
    background: #FF4219;
    border-radius: 100px;
}
.tk_b .lf_t .hua{
    color: #AF5D2E;
    text-decoration:underline;
    font-size: 30rpx !important;
}
.cardBox{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 40rpx;
    width: 100%; 
    box-sizing: border-box;
    margin-top: 60rpx;
}
.min_card{
    width: calc(100%/2 - 18rpx) ;
    height: 154rpx;
    border: 1px solid #E6E5E7;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #AF5D2E;
    margin-bottom: 22rpx;
    position: relative;
}
.min_card .tou{
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    background: #F9F9F9;
    opacity: .6;
}
.active{
    border-color: #FF7042 !important;
    background: #FFF5F2 !important;
}
.num_b text:nth-child(1){
    font-size: 46rpx;
    font-weight: bold;
}
.num_b text:nth-child(2){
    font-size: 38rpx;
}
.min_card .text{
    font-size: 24rpx;
    color: #FF1919;
    margin-top: 4rpx;
}
.sumBox{
    padding: 0 36rpx;
    width: 100%;
    box-sizing: border-box;
}
.form_box{
    border: 1px solid #E6E5E7;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    height: 174rpx;
}
.inp_box{
    display: flex;
    justify-content: flex-start;
    margin-left: 30rpx;
    margin-top: 40rpx;
}
.inp_box input{
    width: 250rpx;
    border-bottom: 1rpx solid #ABABAB;
    text-indent: 18rpx;
}
.inp_box text{
    color: #222;
    font-size: 30rpx;
}
.tips{
    margin-top: 14rpx;
    color: #FF1919;
    font-size: 28rpx;
    margin-left: 30rpx;
}
.btnBox{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100rpx;
}
.btnBox .btn{
    width: 620rpx;
    text-align: center;
    line-height: 80rpx;
    color: #fff;
    font-size: 36rpx;
    height: 88rpx;
    background: #FF4219;
    border-radius: 100px;
}

</style>
